<template>
  <div class="orderInfo">
    <navBar :title="details.order_number" @onClickLeft="onClickLeft" />
    <!-- <a class="file-details"  :href="`${baseUrls}/api/download?path=orderFile/20200906/pkq.jpeg`" download='orderFile/20200906/pkq.jpeg' >123123</a> -->

    <div class="orderInfo-content">
      <van-collapse v-model="activeClass">
        <van-collapse-item title="流程进度" name="1">
          <div class="steps-box">
            <van-steps direction="vertical">
              <van-step :border="false" v-for="(data, index) in details.statuss" :key="index">
                <template slot="active-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <template slot="inactive-icon">
                  <div class="activeIcon">
                    <div></div>
                  </div>
                </template>
                <div class="step-title">
                  <span>{{data.describe}}</span>
                </div>
                <div class="step-info">
                  <span>{{data.created_at}}</span>
                </div>
              </van-step>
            </van-steps>
          </div>
        </van-collapse-item>
        <van-collapse-item title="订单信息" name="2">
          <van-cell :border="false" title="订单状态" :value="stausName">
            <template #default>
              <span :class="details.status | statusColor">{{stausName}}</span>
            </template>
          </van-cell>
          <van-cell
            v-if="details.status == 6"
            :border="false"
            title="退回原因"
            label-class="font_danger ml10"
            :value="details.order_records_reason.isSelf|isSelf"
          />
          <van-cell
            v-if="details.status == 6"
            :border="false"
            title="原因说明"
            label-class="font_danger ml10"
            :value="details.order_records_reason.remark"
          />
          <van-collapse-item title="所需文件" name="3" >
            <div v-if="Array.isArray(details.ordersExpenseCateJson)">
              <div v-for='(data,index) in details.ordersExpenseCateJson' :key='index'>
                  <van-cell :title="data.fieldCh" :border="false" v-if='data.type=="file"'>
                    <template #default>
                        <a
                          v-if='!Array.isArray(data.value)'
                          class="f20 btn_text"
                          :href="data.value"
                          :download="data.fieldCh"
                        >
                          <van-icon name="balance-list-o" />
                        </a>
                        <span v-else v-for='(img,index1) in data.value' :key='index1'>
                          <a
                            class="f20 btn_text"
                            :href="img"
                            :download="data.fieldCh"
                          >
                            <van-icon name="balance-list-o" />
                          </a>
                        </span>
                    </template>
                  </van-cell>
                  <van-cell :title="data.fieldCh" v-if="data.fieldCh == '报销人员'">
                    <template #default>
                      <span>{{data.value=='-1' ? '自己' : '他人'}}</span>
                    </template>
                  </van-cell>
                  <van-cell :title="data.fieldCh" v-if="data.fieldCh == '是否公务卡'">
                    <template #default>
                      <span>{{data.value=='-1' ? '否' : '是'}}</span>
                    </template>
                  </van-cell>
                  <van-cell :title="data.fieldCh" v-if="data.fieldCh == '报销方式'">
                    <template #default>
                      <span>{{data.value=='0' ? '未选择' : data.value=='1' ? "公务卡" : '工资卡'}}</span>
                    </template>
                  </van-cell>
              </div>
            </div>
            
            <van-cell title="发票文件" :border="false" v-if='details.invoice_file'>
              <template #default>
                  <a
                    class="f20 btn_text"
                    :href="`${baseUrls}/api/download?path=${details.invoice_file}`"
                    download="发票文件"
                  >
                  <van-icon name="balance-list-o" />
                </a>
              </template>
            </van-cell>
            <van-cell title="服务文件" :border="false" v-if='details.service_file'>
              <template #default>
                  <a
                    class="f20 btn_text"
                    :href="`${baseUrls}/api/download?path=${details.service_file}`"
                    download="服务文件"
                  >
                  <van-icon name="balance-list-o" />
                </a>
              </template>
            </van-cell>
          </van-collapse-item>
          <!-- <van-cell title="发票文件" :border="false" v-if="details.invoice_file">
            <template #default>
              <a
                class="f20 btn_text"
                :href="`${baseUrls}/api/download?path=${details.invoice_file}`"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="balance-list-o" />
              </a>
            </template>
          </van-cell> -->
          <van-cell :border="false" title="报销人姓名" :value="details.expenseName" />
          <van-cell :border="false" title="代办事项" :value="details.service_project_title" />
          <van-cell :border="false" title="报销类型" :value="details.expenseCate_title" />
          <van-cell :border="false" title="报销时间" :value="details.service_time==0?'NA':details.service_time+'天'" />
          <template v-if="orderPayStatus">
            <van-cell
              value-class="originPrice"
              :border="false"
              title="原价"
               v-if="details.status == 5"
              :value="details.pay_info.original_price + '元'"
            />
            <van-cell
              :border="false"
              title="应缴金额"
              v-if="details.status == 5"
              :value="details.pay_info.real_price+'元'"
            />
          </template>
          <van-cell
            :border="false"
            title="公务卡支付"
            v-if="isOfficialCard !== null"
            :value="isOfficialCard == 1 ? '是' : '否'"
          />
          <van-cell
            :border="false"
            title="发票是否过期"
            :value="details.service_time == 0 ? '是' : '否'"
          />
          <van-cell title="签字文件" :border="false" v-if="details.sign_file">
            <template #default>
              <a
                class="f20 btn_text"
                :href="details.sign_file"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="records" class="f20" />
              </a>
            </template>
          </van-cell>
          <van-cell title="OA截图" :border="false" v-if="details.oa_img">
            <template #default>
              <a
                class="f20 btn_text"
                :href="details.oa_img"
                download="orderFile/20200906/pkq.jpeg"
              >
                <van-icon name="photo" />
              </a>
            </template>
          </van-cell>
          <van-cell
            v-if="details.rmb_voucher"
            :border="false"
            title="报销凭证号"
            :value="details.rmb_voucher"
          />
          <van-cell :border="false" title="创建时间" :value="details.created_at" />
          <van-collapse-item title="代报员信息" name="4" v-if="showErrandsInfo">
            <van-cell :border="false" title="代报员" :value="details.errands_id && details['users as errands_name']" />
            <van-cell
              :border="false"
              title="联系电话"
              :value="details.errands_id && details['users as errands_phone']"
            />
            <van-cell
              :border="false"
              title="收件人姓名"
              :value="details.errands_id&& details['errands_info as errands_address_name']"
            />
            <van-cell
              :border="false"
              title="收件人电话"
              :value="details.errands_id&& details['errands_info as errands_address_phone']"
            />
            <van-cell
              :border="false"
              title="收件人地址"
              :value="details.errands_id&& details['errands_info as errands_address']"
            />
            <van-cell
              :border="false"
              title="收件人邮编"
              :value="details.errands_id&& details['errands_info as errands_address_postcode']"
            />
          </van-collapse-item>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="btn-box-flex">
      <!-- <van-button type="info" block @click="updateOrder" class="mb15" v-if="showUpdateOrder">补充订单</van-button> -->
      <van-button type="info" block @click="goPay" v-if="orderPayStatus">去支付</van-button>
      <van-button type="info" block @click="orderConfirm" v-if="details.status == 3">确认结单</van-button>
      <van-button
        type="info" block @click="orderCancel" v-if="details.status == 1 ||details.status == 2 || details.status == 5 ">取消订单</van-button>
    </div>
    <orderCancel ref="orderCancel" :Show="shows" />
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { getOrderInfo, orderConfirm } from "@a/order.js";
import { Dialog, Toast } from "vant";
import orderCancel from "../components/orderCancel.vue";
import axios from 'axios'
import config from '../../../../../public/config'
import {get} from '../../../../../public/API/query'
export default {
  components: {
    navBar,
    orderCancel,
  },
  data() {
    return {
      details: {
        order_number: "",
        
      },
      isOfficialCard: null,
      stausName:'',
      shows:null,
      activeClass: ["2"],
      baseUrls: process.env.VUE_APP_BASE_URL,
      originUrl: process.env.VUE_APP_ORIGIN_URL,
      A_URL:process.env.VUE_APP_A_URL,
      show:{
        order_detail:{}  
      }
    };
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
  created() {
    this.init();
  },
  computed: {
    orderPayStatus() {
      if (this.details.status == 5) {
        return  true;
      } else {
        return false;
      }
    },
    showUpdateOrder() {
      if (this.details.status == 3 || this.details.status == 4) {
        return false;
      } else {
        return true;
      }
    },
    showErrandsInfo() {
      let arr = [2, 3, 4, 6, 7];
      if (arr.includes(this.details.status)) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    onClickLeft() {
      this.$router.push("/user/home");
    },
    cancel() {
      this.$router.push("/user/home");
    },
     //ZJJ方法
    init() {
      this.$loading();
      let params = {
        id: this.$route.params.id,
      };
      if (this.$route.query && this.$route.query.id) {
        params.id = this.$route.query.id;
      }
      get('ordersDetail',params,res=>{
        this.$loadingClear();
        if (res.code == 200) {
          res.data.ordersExpenseCateJson.map(item=>{
              if(item.fieldEn == 'isOfficialCard'){
                console.log('是否公务卡',item.value)
                this.isOfficialCard = item.value
              }
            })
          this.details = res.data;
          this.stausName = this.getStaus(res.data.status)
          let val = this.details.statuss.filter(item => item.status_id == 3);
          if(this.details.status == 13 && val.length>0 && this.details.ordersRefunds_status == -1 && this.details.ordersRefunds_type == 1){
             Dialog({
              title: '代报员审核不通过原因',
              message: this.details.ordersRefunds_retRemark,
            })
          }else if (this.details.status == 13 && val.length>0 &&this.details.ordersRefunds_type == 2 && this.details.ordersRefunds_status == 2){
            console.log('代报员直接退')
            Dialog({
              title: '代报员退回原因',
              message: this.details.ordersRefunds_retRemark,
            })
          }else if(this.details.status == 13 && val.length>0 &&this.details.ordersRefunds_type == 1 && this.details.ordersRefunds_status == 2){
              Dialog({
                message:'代报员退单审核通过'
            })
          }else if(this.details.status == 13  && this.details.ordersRefunds_status == 2 && (typeof this.details.ordersRefunds_type == Number|| String)){
            console.log()
            Dialog({
              message:'退单成功'
            })
          }
          this.details.status == 1 || this.details.status == 5?this.shows = false:this.shows = true
          this.details.service_file?this.details.serviceFiles = this.details.service_file.split("&"):"";
          if(this.details.expenseCate_id == 1 && this.details.company_id == 1){
                var list=localStorage.getItem('updateTip')||[];//为2021年1月1日前暂停订单计时做的标记，1月1日后面可以删除
                if(!Array.isArray(list)){
                  list=JSON.parse(list)
                }
                var sign=0;
                for(var i=0;i<list.length;i++){
                  if(list[i]==res.data.id){
                    sign=1;break;
                  }
                }
                if(sign==0){
                  if(this.$ClosePrompt(this.$ENDTIME)){
                    Dialog.alert({
                      title: '提示',
                      message: `尊敬的用户，您好！感谢您对【我爱报销】的喜爱与信任！目前由于财务2020年度专利经费不足，专利代报只接单，所有专利订单将在2021年1月1日后继续为您代报，请悉知!`,
                    })
                  }
                  list.push(res.data.id)
                  console.log(list,'b')
                  localStorage.setItem('updateTip',JSON.stringify(list))
                }

          }
        }else{
          Toast.fail(res.data)
        }
      })
    },
     getStaus(value){
     switch (value) {
    case 1:
      return "待接单";
    case 2:
      return "处理中";
    case 3:
      return "用户待确认";
    case 4:
      return "已完成";
    case 5:
      return "待付款";
    case 6:
      return "代报员退回";
    case 7:
      return "补充资料待确认";
    case 8:
      return "失效";
    case 9:
      return "已取消";
    case 10:
      return "检查报销资料中";
    case 11:
      return "报销资料需补充信息";
    case 12:
      return "待代报员确认自已工作结果是否正确";
    case 13:
      return "退款订单";
  }  
  },
    goPay() {
      this.$router.push({
        path: "/pay/payMethod",
        query: {
          pay_info_id:this.details.pay_info.id,
          front_url: `${this.baseUrls}/user/home`,
          id: this.details.id,
        },
      });
    },
    updateOrder() {
      Toast('该功能正在改进')
    },
    orderConfirm() {
      Dialog.confirm({
        title: "提示",
        message: "您是否确认订单已经完成？",
        cancelButtonText: "在看看",
      })
        .then(() => {
          this.orderConfirmPost();
        })
        .catch(() => {});
    },
    orderConfirmPost() {
      let params = {
        id: this.$route.params.id,
      };
      get('ordersOver',params,res=>{
        if (res.code == 200) {
          Toast.success("订单已完成");
          this.$router.push("/user/home");
        }
      })
    },
    orderCancel() {
      this.$refs["orderCancel"].show(this.$route.params.id);
    },
  },
  filters: {
      isSelf(value){
          if(value == 1){
              return '代报员原因'
          }else{
              return '用户原因'
          }
          
      }
  },
};
</script>

<style lang='less' scoped>
.orderInfo {
  height: 100%;
  width: 100%;
  &-content {
    padding-bottom: 70px;
    box-sizing: border-box;
    .steps-box {
      /deep/.van-steps {
        .van-hairline.van-step.van-step--vertical.van-step--finish {
          .van-step__line {
            background-color: #1996ff;
          }
        }

        .van-hairline.van-step.van-step--vertical:last-child {
          .van-step__line {
            display: none;
          }
        }

        .van-step__circle-container {
          z-index: 1;
          background-color: #fff;
        }

        // 激活的图标
        .activeIcon {
          padding: 2px;
          box-sizing: border-box;
          width: 11px;
          height: 11px;
          border-radius: 50%;
          border: 1px solid #068eff;

          > div {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #068eff;
          }
        }

        // 未激活的图标
        .inactiveIcon {
          position: relative;

          width: 11px;
          height: 11px;
          border-radius: 50%;
          border: 1px solid #068eff;
        }

        .step-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.373333rem;
          font-weight: 700;
          color: #353535;

          .button {
            padding: 0 10px;
            font-size: 12px;
            background-color: #c8c8c8;
            border-radius: 7.5px;
            font-size: 12px;
            height: 16px;
            line-height: 15px;
            font-weight: 500;
          }
        }

        .step-info {
          color: #353535;
          font-size: 12px;

          > div:nth-child(1) {
            display: flex;
            justify-content: space-between;
            line-height: 30px;
          }
        }
      }
    }
    .originPrice {
      span {
        text-decoration: line-through;
      }
    }
    .file-details {
      text-decoration: underline;
    }
    .files {
      display: inline-block;
      margin-right: 15px;
    }
  }
}
</style>